import { fetchCategoryBySlug, type PageProps } from '~/src/lib/api/data/getCategories';
import { ClickCounter } from '#/layout/ui/playground/ClickCounter';
import { TabGroup } from '#/layout/ui/playground/TabGroup';

export default async function Layout({ children, params }: PageProps) {
  const category = await fetchCategoryBySlug(params.categorySlug);
  if (!category) return null;
  return (
    <div className="space-y-9">
      <div>
        <div className="flex justify-between">
          <TabGroup
            path={`/error-handling/${category.slug}`}
            items={[
              {
                text: 'All',
              },
              ...category.items.map((x) => ({
                text: x.name,
                slug: x.slug,
              })),
            ]}
          />

          <div className="self-start">
            <ClickCounter />
          </div>
        </div>
      </div>

      <div>{children}</div>
    </div>
  );
}